<template>
  <div class="confirm">
    <orderHeader title="确认订单">
      <template #tishi>
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </template>
    </orderHeader>
    <div class="box">
      <div class="container">
        <div class="confirm-box">
          <div class="address">
            <h2>收货地址</h2>
            <!-- action  -->
            <div class="address-box" v-for="item in userAddress" :key="item.id" :class="{action:item.ischecked}" @click="changeAddress(item)">
              <div class="box-top">
                <h3>{{item.username}}</h3>
                <div class="detali">
                  <p class="phone">{{item.phonenum}}</p>
                  {{item.address}}
                </div>
                <div class="changeAddress">
                  修改
                </div>
              </div>
              <div class="box-bottom">
              </div>
            </div>
          </div>
          <div class="productList">
            <h2>商品</h2>
            <div class="productItem" v-for="item in isSelect " :key="item.id">
              <img :src="item.imgUrl" alt="">
              <a href="#">{{item.title}}</a>
              <p class="num">{{item.price}}元 X {{item.num}}</p>
              <p class="price">{{item.price * item.num}}元</p>
            </div>
          </div>
          <div class="mail">
            <span>邮件方式</span>
            <span class="color">包邮</span>
          </div>
          <div class="end">
            <h2>结算</h2>
            <div class="end-right">
              <p>商品件数：<span class="color">{{productSumNum}}件</span></p>
              <p>商品总价：<span class="color">{{prodcutSum}}元</span></p>
              <p>活动优惠：<span class="color">-0元</span></p>
              <p>活动优惠：<span class="color">-0元</span></p>
              <p>应付金额：<span class="color big">{{prodcutSum}}元</span></p>
            </div>
          </div>
          <div class="gobuy">
            <span class="selectAddress">
              {{userSeletedAddress}}
              <strong class="color" v-if="userSeletedAddress">修改</strong>
            </span>
            <router-link to="/cart">返回购物车</router-link>
            <a href="javascript:;" @click="pay">立刻下单</a>
          </div>
        </div>
      </div>
    </div>
    <Introduce></Introduce>
    <Footer></Footer>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'OrderConfirm',
  data() {
    return {
      userSeletedAddress: ''
    }
  },
  mounted() {
    this.getUserAddress()
  },
  methods: {
    getUserAddress() {
      this.$store.dispatch('getUserAddress')
    },
    // 修改用户收货地址
    changeAddress(item) {
      this.$store.commit('CHANGEADDRESSCHECKED', item.id)
      this.userSeletedAddress = `${item.username} ${item.phonenum} ${item.address}`
    },
    // 提交订单
    pay() {
      const flag = this.userAddress.find(item => item.ischecked)
      if (flag) {
        const day = dayjs()
        const { $y, $M, $D, $H, $m } = day
        const obj = {
          id: this.orderNum(),
          time: `${$y}年${$M + 1}月${$D}日${$H}时${$m}分`,
          username: flag.username,
          payway: '在线支付',
          status: 0,
          productlist: this.isSelect,
          sum: this.prodcutSum,
          userAddress: flag.address,
          phonenum: flag.phonenum
        }
        this.$router.push(`/orderpay/${obj.id}`)
        this.$store.commit('ADDORDERLIST', obj)
      } else {
        this.$message('请选择地址')
      }
    },
    // 生成随机数
    orderNum() {
      let num = ''
      for (let i = 1; i < 4; i++) {
        num += Math.floor(Math.random() * 10)
      }
      num = new Date().getTime() + num
      return num
    }
  },
  computed: {
    ...mapState(['userAddress']),
    ...mapGetters(['isSelect']),
    // 商品总数量
    productSumNum() {
      return this.isSelect.reduce((sum, item) => {
        return (sum += item.num)
      }, 0)
    },
    // 商品总价
    prodcutSum() {
      return this.isSelect.reduce((sum, item) => {
        return (sum += item.num * item.price)
      }, 0)
    }
  }
}
</script>

<style lang='scss' scoped>
.confirm {
  .box {
    padding: 40px 0 60px;
    background-color: #f5f5f5;
    .confirm-box {
      background-color: #fff;
      padding: 48px 24px 0;
      .address {
        overflow: hidden;
        h2 {
          margin-bottom: 30px;
        }
        .address-box {
          position: relative;
          float: left;
          width: 260px;
          height: 170px;
          border: 0.8px solid #b0b0b0;
          padding: 20px 24px 0;
          margin-right: 25px;
          transition: all 0.3s;
          cursor: pointer;
          h3 {
            font-size: 18px;
          }
          .detali {
            line-height: 22px;
            margin-top: 20px;
            font-size: 16px;
            color: #757575;
          }
        }
        .action {
          border: 0.8px solid #ff6700;
        }
        .changeAddress {
          position: absolute;
          bottom: 30px;
          right: 30px;
          font-size: 16px;
          color: #ff6700;
          cursor: pointer;
        }
      }
      .productList {
        padding: 40px 0 20px;
        border-bottom: 1px solid #ccc;
        .h2 {
          margin-bottom: 25px;
        }
        .productItem {
          position: relative;
          padding: 15px 0;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            vertical-align: middle;
          }
          a {
            color: black;
            font-size: 14px;
          }
          .num {
            position: absolute;
            top: 15px;
            left: 65%;
          }
          .price {
            position: absolute;
            top: 15px;
            right: 45px;
            color: #ff6700;
            font-size: 18px;
          }
        }
      }
      .mail {
        padding: 38px 0;
        border-bottom: 1px solid #ccc;
        span {
          font-weight: 700;
          font-size: 16px;
          margin-right: 75px;
        }
      }
      .end {
        padding: 40px 0 20px;
        border-bottom: 1px solid #ccc;
        h2 {
          font-size: 24px;
        }
        .end-right {
          text-align: right;
          font-size: 20px;
          margin-top: 30px;
          color: #ccc;
          p {
            margin-bottom: 10px;
            padding-right: 30px;
          }
          span {
            margin-left: 50px;
          }
        }
      }
      .gobuy {
        position: relative;
        text-align: right;
        height: 40px;
        padding: 20px 48px;
        .selectAddress {
          position: absolute;
          top: 20px;
          left: 28px;
          font-size: 16px;
          strong {
            font-size: 15px;
            cursor: pointer;
          }
        }
        a {
          display: inline-block;
          width: 158px;
          height: 40px;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 40px;
          color: #ccc;
          font-size: 15px;
          margin-left: 25px;
          &:last-child {
            background-color: #ff6700;
            color: #fff;
            transition: all 0.3s;
            border: 0;
            &:hover {
              background-color: #ed6409;
            }
          }
        }
      }
    }
  }
}
.color {
  color: #ff6700;
}
.big {
  font-size: 35px;
}
</style>
